<template>
  <div class="left">
    <h2>乘机人</h2>
    <el-form :model="form" :rules="formrules" ref="formRefs">
      <div class="box" v-for="(item,index) in form.users" :key="index">
        <el-form-item
          label="乘机人"
          :prop="`users[${index}].username`"
          :rules="[{
      required: true, message: '姓名不能为空', trigger: 'blur'
    }]"
        >
          <el-input placeholder="姓名" v-model="item.username"></el-input>
        </el-form-item>
        <el-form-item
          label="证件类型"
          :prop="`users[${index}].id`"
          :rules="[{
      required: true, message: '证件号码不能为空', trigger: 'blur'
    },
    {
      pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '证件号码不合法', trigger: 'blur'
    }]"
        >
          <!-- pattern直接验证正则 -->
          <el-input placeholder="证件号码" v-model="item.id" class="input-with-select">
            <el-select
              style="width:100px"
              :disabled="false"
              slot="prepend"
              v-model="value"
              placeholder="请选择"
            >
              <el-option
                v-for="(item,index) in ['身份证','护照']"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <div @click="removeBtn(index)" class="remove" v-if="index!=0">-</div>
      </div>
      <el-form-item>
        <el-button @click="addBtn" type="primary" class="addBtn">添加乘机人</el-button>
      </el-form-item>
      <div class="checkbox" v-if="infoData">
        <h2>保险</h2>
        <el-form-item>
          <el-checkbox-group v-model="form.insurances" size="medium">
            <el-checkbox
              v-for="(item,index) in infoData.insurances"
              :key="index"
              :label="item.id"
              border
            >{{`${item.type}：￥${item.price}/份x1最高赔付${item.compensation}`}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
    </el-form>
    <div class="userinfo">
      <h2>联系人</h2>
      <el-form
        :model="form"
        :rules="formrules"
        ref="formRef"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="contactName">
          <el-input v-model="form.contactName"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="contactPhone">
          <el-input placeholder="请输入内容" v-model="form.contactPhone">
            <template slot="append">
              <span @click="sendNum">发送验证码</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <el-input v-model="form.captcha"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="submit">
      <el-button type="warning" class="btn" @click="submitBtn">提交</el-button>
    </div>
    <!-- 登录对话框 -->
    <el-dialog :show-close="false" title="请先进行登录" :visible.sync="dialogVisible" width="30%">
      <!-- 内容填充 -->
      <div class="login">
        <LoginForm @DialogClose="DialogClose" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import LoginForm from '@/components/user/LoginForm'
export default {
  components: {
    LoginForm
  },
  props: {
    infoData: Object
  },
  data() {
    return {
      // 对话框显示
      dialogVisible: false,
      form: {
        users: [{ username: '朱文滨', id: '440506199902270412' }], //用户列表
        insurances: [], //保险id
        contactName: '朱文滨', //联系人名字
        contactPhone: '18101299460', //联系人电话
        invoice: false, //是否需要发票
        captcha: '' //验证码
      },
      value: '身份证',
      formrules: {
        contactName: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' }
        ],
        captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    'form.users': {
      handler() {
        console.log(this.form.users.length)
        this.getTotalPrice()
      },
      // 自动触发一下
      immediate: true
    },
    'form.insurances': {
      handler() {
        console.log(this.form.users.length)
        this.getTotalPrice()
      },
      // 自动触发一下
      immediate: true
    }
  },
  methods: {
    addBtn() {
      this.form.users.push({ username: '', id: '' })
    },
    removeBtn(i) {
      this.form.users.splice(i, 1)
    },
    // 发送验证码
    async sendNum() {
      const { data: res } = await this.$axios.post('/captchas', {
        tel: this.form.contactPhone
      })
      if (res) {
        this.$message.success('模拟验证码：' + res.code)
      }
    },
    submitBtn() {
      // 要先判断是否登录
      const token = this.$store.state.user.userInfo.token
      if (!token) {
        this.dialogVisible = true
      }
      //表单验证
      this.$refs.formRefs.validate(flag => {
        if (flag) {
          this.$refs.formRef.validate(valid => {
            if (valid) {
              //表单验证通过后续操作
              this.$axios({
                url:'/airorders',
                method:'POST',
                headers:{'Authorization':'Bearer '+token},
                data:{
                  ...this.form,
                  seat_xid:this.$route.query.seat_xid,
                  air:+this.$route.query.id
                }
              }).then(res=>{
                console.log(res)
                if(res.data.message==='订单提交成功'){
                  this.$message.success('订单提交成功')
                  // /跳转到付款页面
                  this.$router.push('/air/pay?id='+res.data.data.id)
                }
              })
            }
          })
        }
      })
    },
    getTotalPrice() {
      let res = 0
      // 按人数计算价格
      res += this.form.users.length * this.infoData.seat_infos.org_settle_price
      // 按保险计算价格
      this.infoData.insurances.map(x => {
        if (this.form.insurances.indexOf(x.id) !== -1) {
          res += x.price * this.form.users.length
        }
      })

      console.log(res)
      this.$emit('setTotalPrice', { res, length: this.form.users.length })
    },
    DialogClose(){
      this.$message.success('登录成功，您可以进行购买了')
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.left {
  flex: 1;
  h2 {
    font-weight: 400;
    font-size: 22px;
  }
  .box {
    position: relative;
    border-bottom: 1px dashed #ddd;

    padding: 20px 0;
    .remove {
      position: absolute;
      right: -30px;
      top: 110px;
      cursor: pointer;
      text-align: center;
      line-height: 16px;
      color: #fff;
      font-size: 22px;
      width: 20px;
      height: 20px;
      background: #000;
      border-radius: 50%;
    }
  }
  .addBtn {
    margin-top: 40px;
  }
  .checkbox {
    margin-top: 20px;
    padding: 15px 0 30px;
    border-top: 1px dashed #ddd;
    border-bottom: 1px dashed #ddd;
  }
}
.userinfo {
  padding: 20px 0;
  .el-form-item {
    margin-top: 20px;
    .el-input {
      width: 300px;
    }
  }
}

.submit {
  margin-top: 30px;
  margin-left: 100px;
  .btn {
    width: 200px;
    height: 50px;
  }
}
.login {
  width: 400px;
  margin:0 auto;
}
</style>